"use strict";

Object.defineProperty(exports, "__esModule", {
  value: true
});
exports.WidgetRowViewComponent = exports.WidgetRowEditComponent = void 0;
var _vue = require("vue");
var _util = require("../src/util");
var _core = require("@vxe-ui/core");
var _vn = require("../../ui/src/vn");
var _xeUtils = _interopRequireDefault(require("xe-utils"));
var _formGroup = _interopRequireDefault(require("../../form/src/form-group"));
var _formItem = _interopRequireDefault(require("../../form/src/form-item"));
var _row = _interopRequireDefault(require("../../row/src/row"));
var _col = _interopRequireDefault(require("../../row/src/col"));
var _button = _interopRequireDefault(require("../../button/src/button"));
function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
const ViewColItemComponent = (0, _vue.defineComponent)({
  name: 'ViewColItem',
  props: {
    parentWidget: {
      type: Object,
      default: () => ({})
    },
    widget: {
      type: Object,
      default: () => ({})
    },
    span: Number,
    colItemIndex: {
      type: Number,
      default: 0
    }
  },
  emits: [],
  setup(props) {
    const $xeFormDesign = (0, _vue.inject)('$xeFormDesign', null);
    if (!$xeFormDesign) {
      return () => [];
    }
    const {
      reactData: formDesignReactData
    } = $xeFormDesign;
    const handleDragstartColItemEvent = evnt => {
      evnt.stopPropagation();
      const divEl = evnt.currentTarget;
      const dataTransfer = evnt.dataTransfer;
      const widgetId = divEl.getAttribute('data-widget-id') || '';
      const dragWidget = $xeFormDesign.getWidgetById(widgetId);
      if (dataTransfer) {
        dataTransfer.setData('text/plain', widgetId);
      }
      formDesignReactData.sortWidget = dragWidget;
      formDesignReactData.dragWidget = null;
    };
    const sortDragenterColItemEvent = evnt => {
      const {
        parentWidget,
        colItemIndex
      } = props;
      const {
        widgetObjList,
        sortWidget
      } = formDesignReactData;
      const targetWidget = parentWidget.children[colItemIndex];
      const formDesignInternalData = $xeFormDesign.internalData;
      evnt.stopPropagation();
      if (sortWidget && parentWidget && sortWidget.id !== parentWidget.id) {
        if ((0, _util.hasFormDesignLayoutType)(sortWidget)) {
          return;
        }
        if (!(0, _util.hasFormDesignLayoutType)(targetWidget)) {
          const currRest = _xeUtils.default.findTree(widgetObjList, item => item && item.id === sortWidget.id, {
            children: 'children'
          });
          if (currRest) {
            const {
              item,
              index,
              items,
              parent
            } = currRest;
            // 如果数据异常，动态修复
            if (parentWidget.children.length !== parentWidget.options.colSize) {
              parentWidget.children = _xeUtils.default.range(0, parentWidget.options.colSize).map(index => {
                return parentWidget.children[index] || $xeFormDesign.createEmptyWidget();
              });
            }
            // 如果是 row 内移动
            if (parent && parent.id === parentWidget.id) {
              parentWidget.children[colItemIndex] = item;
              parentWidget.children[index] = targetWidget;
            } else {
              // 如果已存在控件
              if (targetWidget && targetWidget.name) {
                return;
              }
              parentWidget.children[colItemIndex] = item;
              items.splice(index, 1);
            }
            evnt.preventDefault();
            formDesignInternalData.lastDragTime = Date.now();
            $xeFormDesign.dispatchEvent('drag-widget', {
              widget: item
            }, evnt);
          }
        }
      }
    };
    return () => {
      const {
        widget,
        span
      } = props;
      const {
        dragWidget,
        activeWidget,
        sortWidget
      } = formDesignReactData;
      return (0, _vue.h)(_formItem.default, {
        span,
        padding: false
      }, {
        default() {
          const name = widget ? widget.name : '';
          const compConf = _core.renderer.get(name) || {};
          const renderWidgetDesignView = compConf.renderFormDesignWidgetEdit || compConf.renderFormDesignWidgetView;
          const renderOpts = widget || {
            name
          };
          const params = {
            widget,
            readonly: false,
            disabled: false,
            isEditMode: true,
            isViewMode: false,
            $formDesign: $xeFormDesign,
            $formView: null
          };
          const isActive = activeWidget && widget && activeWidget.id === widget.id;
          const isEmptyWidget = !renderWidgetDesignView;
          return (0, _vue.h)('div', {
            class: 'vxe-form-design--widget-row-view',
            'data-widget-id': widget.id,
            draggable: !isEmptyWidget,
            onDragstart: handleDragstartColItemEvent,
            onDragenter: sortDragenterColItemEvent,
            onClick(evnt) {
              if (widget) {
                $xeFormDesign.handleClickWidget(evnt, widget);
              }
            }
          }, [(0, _vue.h)('div', {
            class: ['vxe-form-design--widget-row-view-item-inner', {
              'is--empty': isEmptyWidget,
              'is--active': isActive,
              'is--sort': sortWidget && widget && sortWidget.id === widget.id,
              'is--drag': dragWidget && widget && dragWidget.id === widget.id
            }]
          }, [renderWidgetDesignView ? (0, _vue.h)('div', {
            class: 'vxe-form-design--widget-row-view-item-wrapper'
          }, [(0, _vue.h)('div', {
            class: 'vxe-form-design--widget-row-view-item-box vxe-form--item-row'
          }, (0, _vn.getSlotVNs)(renderWidgetDesignView(renderOpts, params))), isActive ? (0, _vue.h)('div', {
            class: 'vxe-form-design--preview-item-operate'
          }, [(0, _vue.h)(_button.default, {
            icon: (0, _core.getIcon)().FORM_DESIGN_WIDGET_COPY,
            status: 'primary',
            size: 'mini',
            circle: true,
            onClick(params) {
              $xeFormDesign.handleCopyWidget(params.$event, widget);
            }
          }), (0, _vue.h)(_button.default, {
            icon: (0, _core.getIcon)().FORM_DESIGN_WIDGET_DELETE,
            status: 'danger',
            size: 'mini',
            circle: true,
            onClick(params) {
              $xeFormDesign.handleRemoveWidget(params.$event, widget);
            }
          })]) : (0, _vue.createCommentVNode)()]) : (0, _vue.h)('div', {
            class: 'vxe-form-design--widget-row-view-empty'
          }, '控件位置')])]);
        }
      });
    };
  }
});
const WidgetRowEditComponent = exports.WidgetRowEditComponent = (0, _vue.defineComponent)({
  name: 'WidgetRowEdit',
  props: {
    renderOpts: {
      type: Object,
      default: () => ({})
    },
    renderParams: {
      type: Object,
      default: () => ({})
    }
  },
  emits: [],
  setup(props) {
    const computedColObjList = (0, _vue.computed)(() => {
      const {
        renderParams
      } = props;
      const {
        widget
      } = renderParams;
      const {
        options
      } = widget;
      const {
        colSpan
      } = options;
      const colList = colSpan ? `${colSpan}`.split(',') : [];
      const rest = colList.map(span => Number(span));
      return rest;
    });
    return () => {
      const {
        renderParams
      } = props;
      const {
        widget
      } = renderParams;
      return (0, _vue.h)(_formGroup.default, {
        field: widget.field
      }, {
        default() {
          const colObjList = computedColObjList.value;
          return colObjList.map((span, colItemIndex) => {
            return (0, _vue.h)(ViewColItemComponent, {
              key: colItemIndex,
              parentWidget: widget,
              widget: widget.children[colItemIndex],
              span,
              colItemIndex
            });
          });
        }
      });
    };
  }
});
const WidgetRowViewComponent = exports.WidgetRowViewComponent = (0, _vue.defineComponent)({
  name: 'WidgetRowView',
  props: {
    renderOpts: {
      type: Object,
      default: () => ({})
    },
    renderParams: {
      type: Object,
      default: () => ({})
    }
  },
  emits: [],
  setup(props) {
    const $xeFormDesign = (0, _vue.inject)('$xeFormDesign', null);
    const $xeFormView = (0, _vue.inject)('$xeFormView', null);
    const computedColObjList = (0, _vue.computed)(() => {
      const {
        renderParams
      } = props;
      const {
        widget
      } = renderParams;
      const {
        options
      } = widget;
      const {
        colSpan
      } = options;
      const colList = colSpan ? `${colSpan}`.split(',') : [];
      const rest = colList.map(span => Number(span));
      return rest;
    });
    return () => {
      const {
        renderParams
      } = props;
      const {
        widget
      } = renderParams;
      const colObjList = computedColObjList.value;
      return (0, _vue.h)(_row.default, {}, {
        default() {
          return colObjList.map((span, colItemIndex) => {
            return (0, _vue.h)(_col.default, {
              key: colItemIndex,
              class: 'vxe-form--item-row',
              span
            }, {
              default() {
                const subWidget = widget.children[colItemIndex];
                if (subWidget) {
                  const {
                    name
                  } = subWidget;
                  const compConf = _core.renderer.get(name) || {};
                  const renderWidgetDesignView = compConf.renderFormDesignWidgetView;
                  const renderOpts = subWidget;
                  const isEditMode = !!$xeFormDesign;
                  const params = {
                    widget: subWidget,
                    readonly: false,
                    disabled: false,
                    isEditMode,
                    isViewMode: !isEditMode,
                    $formDesign: $xeFormDesign,
                    $formView: $xeFormView
                  };
                  if (renderWidgetDesignView) {
                    return (0, _vn.getSlotVNs)(renderWidgetDesignView(renderOpts, params));
                  }
                }
                return (0, _vue.createCommentVNode)();
              }
            });
          });
        }
      });
    };
  }
});